(function () {
  class AniLine extends BaseLayer {
    constructor(config = {}) {
      super(config);
      this.minZoom = 10
      this.maxZoom = 21
      this.name =  'AniLine'
      this.noneTips = true
      this.initLayer({
        type: 'line',
        'layout': {
          'line-join': ['get', 'lineJoin'],
          'line-cap': ['get', 'lineCap']
        },
        'paint': {
          'line-color': ['get', 'lineColor'],
          'line-width': ['get', 'lineWidth']
        }
      })

    }



    getStyle(item) {
      item = Object.assign({}, item, {
        lineColor: item.lineColor || '#ff0000',
        lineWidth: item.lineWidth || 5,
      })
      return item
    }

    makeFeature(item) {
      item = this.getStyle(item)
      let f = {
        type: 'Feature',
        geometry: {
          type: 'LineString',
          coordinates: item.lineCoor
        },
        properties: {
          lineJoin: 'round',
          lineCap: 'round',
          icon: item.icon,
          ...item,
          data: item,
        }
      }
      return f
    }

    loadData() {
      map.addSource('gkde', {
        type: "raster",
        // 高德地图瓦片地址，{x} {y} {z}是瓦片坐标占位符
        tiles: ["http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"],
        tileSize: 256
      })

      map.addLayer({
        id: "gkde",
        type: "raster",
        source: "gkde"
      })

      map.addSource('mapbox-dem', {
        'type': 'raster-dem',
        'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
        'tileSize': 512,
        'maxzoom': 14
      });
      // add the DEM source as a terrain layer with exaggerated height
      map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });

    }
  }


  window.addEventListener('mapCreatedEvent', ev => {
    new AniLine({
      name: 'AniLine'
    })
  })
})();
